<template>
  <div class="car">
  		<navbar class="home-nav">
  		  <template v-slot:center>
  		    <div>购物车({{countBuyItem}})</div>
  		  </template>
  		</navbar>
			<scroll class="content">
				<cartList></cartList>
			</scroll>
			<div class="check-all">
				<checkButton class="checkButton" :isChecked='checkedAll' @click='checkedAllClick'></checkButton>
				<span class="check-text">全选</span>
				<span class="total">合计: ￥{{totalPrice}}</span>
				<div class="calculate" @click="calculateClick">
					去结算({{count}})
				</div>
			</div>
			<toast :message='message' :isShow='toastIsShow'></toast>
  </div>
</template>

<script>
import navbar from 'components/common/navbar/navbar.vue'
import cartList from './components/cartList.vue'
import scroll from 'components/common/scroll/scroll.vue'
import checkButton from 'components/content/checkButton/checkButton.vue'
import toast from 'components/common/toast/toast.vue'
	
export default {
    name:'cart',
		components:{
			navbar,
			scroll,
			cartList,
			checkButton,
			toast
		},
		data(){
			return{
				cartList:this.$store.state.cartList,
				countBuyItem:this.$store.state.cartList.length,
				message:'请添加商品',
				toastIsShow:false
			}
		},
		methods:{
			checkedAllClick(){
				// this.checkedAll = !this.checkedAll
				// for(let i of this.$store.state.cartList) {
				// 	i.isChecked = this.checkedAll
				// }
				//不能直接改变computed里的属性，所谓计算属性实质是方法
				
				if(this.checkedAll) {
					this.cartList.forEach(item => item.isChecked = false)
				} else {
					this.cartList.forEach(item => item.isChecked = true)
				}
				//因为计算属性会响应式刷新，所以不用管checkedAll本身的显示状态
			},
			// checkItemClick(){
			// 	for(let i of this.cartList) {
			// 		if(!i.isChecked) {
			// 			this.checkedAll = false
			// 			return
			// 		} else {
			// 			this.checkedAll = true
			// 		}
			// 	}
			// }
			//不需要传递事件了，checkedAll根据商品列表变化的显示状态已经在computed里面处理过了
			calculateClick(){
				if (this.count === 0) {
					this.toastIsShow = true
					setTimeout(() => {
						this.toastIsShow = false
					}, 1500);
				}
			}
		},
		computed:{
			checkedAll(){
					if(this.cartList.length === 0) return false
					for(let i of this.cartList) {
						if(!i.isChecked) {
							return false
						}
					}
					return true
			},
			totalPrice(){
				return this.cartList.filter(item =>{
					return item.isChecked
				}).reduce((preValue,item) => {
					return preValue + item.price * item.count
				},0).toFixed(2)
			},
			count(){
				return this.cartList.filter(item =>{
					return item.isChecked
				}).reduce((preValue,item) => {
					return preValue + item.count
				},0)
			}
		}
}
</script>

<style scoped>
.home-nav {
    background-color: var(--color-tint);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
	}
	.content {
	  position: absolute;
		width: 100%;
		overflow: hidden;
	  top: 44px;
	  bottom: 89px;
	  left: 0;
	  right: 0;
	}
	.checkButton {
		margin-left: 15px;
	}
	.check-all {
		height: 40px;
		background-color: #eee;
		position: absolute;
		bottom: 49px;
		width: 100%;
		display: flex;
		align-items: center;
	}
	.check-text {
		margin-left: 5px;
	}
	.check-all .total {
		margin-left: 20px;
	}
	.calculate {
		width: 100px;
		height: 100%;
		background-color: orangered;
		line-height: 39px;
		position: absolute;
		right: 0;
		text-align: center;
		color: white;
	}
</style>